<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="color" id="color"><span id="colorText"></span>
<script>
  document.querySelector('#color').addEventListener('change', (ev) => {
    document.querySelector('#colorText').textContent = ev.target.value
    console.log(ev.target.value)
  }, false)
</script>
</body>
</html>